
/* 
	Primary Color: #3F51B5
	Dark Primary Color: #303F9F 
	Light Primary Color: #7986CB
	
	Secondary Color: #009688
	Dark Primary Color: #00796B
	Light Primary Color: #4DB6AC
	
	Text Size Small: 12
	Text Size Medium: 14 
	Text Size Regular: 16
	Text Size Large: 20
	Text Size xLarge: 34
	
	Color-Black Primary: #212121
	Color-Black Secondary: #616161
	
	Color-White Primary: #FAFAFA
	Color-White Secondary: #E0E0E0
	
	Color-Error: #D34336
	
	Divider Color: #EEEEEE
*/

@font-face {
    font-family: Roboto-Regular;
    src: url('../fonts/Roboto-Regular.ttf');
}

.product-detail-header {
	-fx-background-color: -fx-primary-color;
}

.jfx-text-field:error, .jfx-password-field:error {
    -jfx-focus-color: #D34336;
    -jfx-unfocus-color: #D34336;
}

.jfx-text-field .error-label, .jfx-password-field .error-label {
	-fx-font-family: "Roboto-Regular";
    -fx-text-fill: #D34336;
    -fx-font-size: 0.75em;
}

.jfx-text-field .error-icon, .jfx-password-field .error-icon {
    -fx-text-fill: #D34336;
    -fx-font-size: 1em;
}

.combo-box-report > .arrow-button > .arrow {
	-fx-background-color: white;
}

.combo-box-report .list-view .jfx-list-cell .label,
.combo-box-report .list-view .jfx-list-cell:filled:hover .label {
    -fx-text-fill: white;
}

.combo-box-report .list-view .jfx-list-cell .custom-jfx-list-view-icon,
.combo-box-report .list-view .jfx-list-cell:filled:hover .custom-jfx-list-view-icon,
.combo-box-report .list-view .jfx-list-cell:selected .custom-jfx-list-view-icon {
    -fx-fill: #009688;
}

.combo-box-report .list-view .jfx-list-cell:odd:selected > .jfx-rippler > StackPane,
.combo-box-report .list-view .jfx-list-cell:even:selected > .jfx-rippler > StackPane {
    -fx-background-color: #009688;
}

.combo-box-report .list-view .jfx-list-cell {
    -fx-background-insets: 0.0;
}

.combo-box-report .list-view .jfx-list-cell .jfx-rippler {
    -jfx-rippler-fill: #009688;
}

/*******************************************************************************
*                                                                              *
* Tree Table View                                                              *
*                                                                              *
*******************************************************************************/

.tree-table-view {
    -fx-tree-table-color: rgba(82, 100, 174, 0.4);
    -fx-tree-table-rippler-color: rgba(82, 100, 174, 0.6);
}

.tree-table-view:focused .tree-table-row-cell:selected {
    -fx-background-color: -fx-tree-table-color;
    -fx-table-cell-border-color: -fx-tree-table-color;
    -fx-text-fill: BLACK;
}

.tree-table-view:focused .tree-table-row-cell:selected .tree-table-cell {
    -fx-text-fill: BLACK;
}

.tree-table-view .jfx-rippler {
    -jfx-rippler-fill: -fx-tree-table-rippler-color;
}

.tree-table-view .column-header,
.tree-table-view .column-header-background,
.tree-table-view .column-header-background .filler {
    -fx-background-color: TRANSPARENT;
}

.tree-table-view .column-header {
    -fx-border-width: 0 1 0 1;
    -fx-border-color: #F3F3F3;
}

.tree-table-view .column-header .label {
    -fx-text-fill: #949494;
    -fx-padding: 16 0 16 0;
}

.tree-table-view .column-header .arrow, .tree-table-view .column-header .sort-order-dot {
    -fx-background-color: #949494;
}

.tree-table-view .column-header:last-visible {
    -fx-border-width: 0 2 0 1;
}

.tree-table-view .column-header-background {
    -fx-border-width: 0 0.0 1 0;
    -fx-border-color: #F3F3F3;
}

.tree-table-view .tree-table-cell {
    -fx-border-width: 0 0 0 0;
    -fx-padding: 16 0 16 0;
    -fx-alignment: top-center;
}

.tree-table-view .column-overlay {
    -fx-background-color: -fx-tree-table-color;
}

.tree-table-view .column-resize-line, .tree-table-view .column-drag-header {
    -fx-background-color: -fx-tree-table-rippler-color;
}

.tree-table-view:focused {
    -fx-background-color: -fx-tree-table-color, -fx-box-border, -fx-control-inner-background;
    -fx-background-insets: -1.4, 0, 1;
    -fx-background-radius: 1.4, 0, 0;
    /*....*/
    -fx-padding: 1; /* 0.083333em; */
}

.tree-table-row-cell > .tree-disclosure-node > .arrow {
    -fx-background-color: -fx-text-fill;
    -fx-padding: 0.333333em 0.229em 0.333333em 0.229em; /* 4 */
    -fx-shape: "M 0 -3.5 L 4 0 L 0 3.5 z";
}

.tree-table-row-cell .jfx-text-field {
    -fx-focus-color: rgba(82, 100, 174);
}

.tree-table-row-cell .jfx-text-field:error {
    -jfx-focus-color: #D34336;
    -jfx-unfocus-color: #D34336;
}

.tree-table-row-cell .jfx-text-field .error-label {
    -fx-text-fill: #D34336;
    -fx-font-size: 0.75em;
}

.tree-table-row-cell .jfx-text-field .error-icon {
    -fx-fill: #D34336;
    -fx-font-size: 1.0em;
}

.tree-table-row-group {
    -fx-background-color: rgba(230, 230, 230);
}

.tree-table-view .menu-item:focused {
    -fx-background-color: -fx-tree-table-color;

}

.tree-table-view .menu-item .label {
    -fx-padding: 5 0 5 0;
}


/*******************************************************************************
 *                                                                             *
 * JFX Dialog Layout                                                           *
 *                                                                             *
 ******************************************************************************/

.jfx-dialog-overlay-pane {
    -fx-background-color: rgba(0.0, 0.0, 0.0, 0.1);
}

.dialog-trigger {
    -fx-background-color: WHITE;
    -jfx-button-type: RAISED;
    -fx-font-size: 14.0px;
}

.jfx-dialog-layout {
    -fx-padding: 24.0px 24.0px 16.0px 24.0px;
    -fx-text-fill: rgba(0.0, 0.0, 0.0, 0.87);
}

.jfx-layout-heading {
    -fx-font-size: 20.0px;
    -fx-font-weight: BOLD;
    -fx-alignment: center-left;
    -fx-padding: 5.0 0.0 5.0 0.0;
}

.jfx-layout-body .label {
    -fx-font-size: 14.0px;
    -fx-pref-width: 400.0px;
    -fx-wrap-text: true;
}

.jfx-layout-actions {
    -fx-padding: 10.0px 0.0 0.0 0.0;
    -fx-alignment: center-right;
}

.dialog-accept {
    -fx-text-fill: #03A9F4;
    -fx-font-weight: BOLD;
    -fx-padding: 0.7em 0.8em;
}

/*******************************************************************************
 *                                                                             *
 * JFX Pop Up                                                                  *
 *                                                                             *
 ******************************************************************************/

.jfx-popup-overlay-pane {
    -fx-background-color: transparent;
}

.jfx-popup-container {
    -fx-background-color: WHITE;
    -fx-pref-width: 151.0px;
}

.popup-list-view {
    -fx-pref-width: 150.0px;
}

.jfx-snackbar-content {
    -fx-background-color: #323232;
}

.jfx-snackbar-toast {
    -fx-text-fill: WHITE;
}

.jfx-snackbar-action {
    -fx-text-fill: #ff4081;
}

/*******************************************************************************
 *                                                                             *
 * Tabs                                                                 *
 *                                                                             *
 ******************************************************************************/

.tab-pane 
{
-fx-skin: "com.sun.javafx.scene.control.skin.TabPaneSkin";
/* -fx-tab-min-width: 4.583em;  55 */
/* -fx-tab-max-width: 4.583em; 55 */
-fx-tab-min-height: 2em; /* 24 */
-fx-tab-max-height: 2em; /* 24 */
}

.tab .tab-label 
{

-fx-alignment: CENTER;
-fx-text-fill: white;
}

.tab *.tab-label Text {

}

.tab-content-area 
{
-fx-background-color: -fx-control-inner-background;
-fx-padding: 0.0em; /* 0 */
/* -fx-opacity: -fx-disabled-opacity;*/
}
.tab 
{
/* This is how it is done in Button, but the -1 inset caused a white line  */
/* to appear beneath the tab, which looks bad, so it's taken out below.    */
/*    -fx-background-color: -fx-shadow-highlight-color, -fx-tab-border-color, -fx-inner-border, -fx-body-color;
-fx-background-radius: 5 5 0 0, 5 5 0 0, 4 4 0 0, 3 3 0 0;
-fx-background-insets: 0 0 -1 0, 0, 1, 2;*/

-fx-background-insets: 0, 1, 2;
-fx-padding: 0.8em 0.8em 0.5em 0.8em; /* 1 6 1 6 */
/*    -fx-text-fill: -fx-text-base-color;*/
}
.tab:top 
{
-fx-background-color: #3F51B5;
}
.tab:right 
{
-fx-background-color: transparent, transparent, transparent;
}
.tab:bottom 
{
-fx-background-color: transparent, transparent, transparent;
}
.tab:left 
{
-fx-background-color: transparent, transparent, transparent;
}
.tab:hover 
{
-fx-color: #7986CB;
}
.tab:selected 
{
/*    -fx-background-color: white;*/
/*    -fx-background-color: -fx-tab-border-color, -fx-inner-border, -fx-body-color;
-fx-background-radius: 5 5 0 0, 4 4 0 0, 3 3 0 0;
-fx-background-insets: 0, 1 1 0 1, 2 2 0 2;*/
-fx-border-color: #009688;
-fx-border-width: 0 0 4 0;

}
.tab:disabled 
{
-fx-opacity: #3F51B5;
}
.tab:disabled:hover 
{
-fx-color: #3F51B5;
-fx-opacity: -fx-disabled-opacity;
}
.tab-pane *.tab-header-background 
{
-fx-background-color: transparent;
}
/*.tab-pane *.tab-header-area {*/
/* I would like to use -fx-tab-border-color here, but for some reason it */
/* just isn't the correct color, even though it works in :top above */
/*    -fx-background-color: -fx-tab-border-color, lightgray;*/
/*}*/
.tab-pane:top *.tab-header-area 
{
-fx-background-insets: 0, 0 0 1 0;
-fx-padding: 0.416667em 0.166667em 0.0em 0.833em; /* 5 2 0 10 */
}
.tab-pane:bottom *.tab-header-area 
{
-fx-background-insets: 0, 1 0 0 0;
-fx-padding: 0 0.166667em 0.416667em 0.833em; /* 0 2 5 0 */
}
.tab-pane:left *.tab-header-area 
{
-fx-background-insets: 0, 0 1 0 0;
-fx-padding: 0.833em 0.0em 0.166667em 0.416667em; /* 10 0 2 5 */
}
.tab-pane:right *.tab-header-area 
{
-fx-background-insets: 0, 0 0 0 1;
-fx-padding: 0.833em 0.416667em 0.166667em 0.0em; /* 10 5 2 0 */
}
.tab-pane .headers-region 
{

}
/* TODO: scaling the shape seems to make it way too large */
.tab-close-button 
{
-fx-background-color: -fx-mark-color;
-fx-shape: "M 0,0 H1 L 4,3 7,0 H8 V1 L 5,4 8,7 V8 H7 L 4,5 1,8 H0 V7 L 3,4 0,1 Z";
-fx-scale-shape: false;
-fx-effect: dropshadow(two-pass-box , rgba(255, 255, 255, 0.4), 1, 0.0 , 0, 1);
}
.tab-close-button:hover 
{
-fx-background-color: derive(-fx-mark-color, -30%);
}
/* CONTROL BUTTONS */
.control-buttons-tab 
{
-fx-background-color: -fx-tab-border-color, -fx-inner-border, -fx-body-color;
-fx-background-insets: 0, 1, 2;
-fx-background-radius: 5 5 0 0, 4 4 0 0, 3 3 0 0;
-fx-padding: 0.083333em 0.25em 0.083333em 0.25em; /* 1 3 1 3 */
}
.tab-down-button 
{
-fx-background-color: transparent;
-fx-padding: 0.0em 0.416667em 0.0em 0.416667em; /* 0 5 0 5 */
}
.tab-down-button:hover 
{
-fx-background-color: -fx-body-color;
-fx-color: -fx-hover-base;
}
.tab-down-button .arrow 
{
-fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
-fx-background-insets: 1 0 -1 0, 0;
-fx-padding: 0.238083em 0.416667em 0.238083em 0.416667em; /* 2.857 5 2.857 5 */
-fx-shape: "M 0 0 H 7 L 3.5 4 z";
}
/* FLOATING TABS CUSTOMISATION */
.tab-pane.floating *.tab-header-background {
-fx-background-color: null;
}
.tab-pane.floating *.tab-header-area 
{
-fx-background-color: null;
}
.tab-pane.floating *.tab-content-area 
{
-fx-background-color: -fx-tab-border-color, -fx-control-inner-background;
-fx-background-insets: 0, 1;
-fx-background-radius: 5, 4;
}
.tab-pane.floating *.tab 
{
-fx-background-color: -fx-tab-border-color, -fx-inner-border, -fx-body-color;
-fx-background-insets: 0, 1, 2;
-fx-background-radius: 5 5 0 0, 4 4 0 0, 3 3 0 0;
}
.tab-pane.floating *.tab:selected 
{
-fx-background-color: -fx-tab-border-color, -fx-control-inner-background;
-fx-background-insets: 0 0 -1 0, 1 1 -1 1;
-fx-background-radius: 5 5 0 0, 4 4 0 0;
}
/*.tab-pane:floating *.control-buttons-tab 
{
-fx-padding: 0.083333em 0.25em 0.083333em 0.25em;
-fx-background-color: -fx-tab-border-color, -fx-inner-border, -fx-body-color;
-fx-background-radius: 5 5 0 0, 4 4 0 0, 3 3 0 0;
-fx-background-insets: 0, 1 1 0 1, 2 2 0 2;
}*/

/*******************************************************************************
 *                                                                             *
 * Paginations                                                                 *
 *                                                                             *
 ******************************************************************************/

.pagination {
    -fx-padding: 0;        
    -fx-arrows-visible: true;
    -fx-tooltip-visible: true;
    -fx-page-information-visible: true;
    -fx-page-information-alignment: bottom;
    -fx-arrow-button-gap: 0;
}
.pagination > .page {
    -fx-background-color: transparent;
}
.pagination > .pagination-control {
    -fx-background-color: transparent;
    -fx-font-size: 1.32em;
}
.pagination > .pagination-control > .control-box {
    -fx-padding: 5px 0 0 0;
    -fx-spacing: 2;
    -fx-alignment: center;
}
.pagination > .pagination-control > .control-box > .left-arrow-button {
    -fx-background-radius: 3 0 0 3, 3 0 0 3, 2 0 0 2, 1 0 0 1;
    -fx-background-insets: 0 0 -1 5, 0 0 0 5, 1 1 1 6, 2 2 2 7;
    -fx-padding: 0em 0.417em 0em 0.833em; /* 0 5 0 10 */
    -fx-background-color: transparent;
}

.pagination > .pagination-control > .control-box > .left-arrow-button:selected {
    -fx-background-color: #3F51B5;
}

.pagination > .pagination-control > .control-box > .right-arrow-button {
    -fx-background-radius: 0 3 3 0, 0 3 3 0, 0 2 2 0, 0 1 1 0;
    -fx-background-insets: 0 5 -1 0, 0 5 0 0, 1 6 1 1, 2 7 2 2;
    -fx-padding: 0em 0.75em 0em 0.417em; /* 0 9 0 5 */
    -fx-background-color: transparent;
}

.pagination > .pagination-control > .control-box > .right-arrow-button:selected {
   -fx-background-color: #3F51B5;
}

.pagination > .pagination-control .left-arrow {
    -fx-background-color: #3F51B5;
    -fx-background-insets: 1 0 -1 0, 0;
    -fx-padding: 0.375em 0.291em 0.375em 0.291em;
    -fx-shape: "M 0 0 L -13 7 L 0 13 z";
    -fx-scale-shape: true;
}
.pagination > .pagination-control .right-arrow {
    -fx-background-color: #3F51B5;
    -fx-background-insets: 1 0 -1 0, 0;
    -fx-padding: 0.375em 0.291em 0.375em 0.291em;
    -fx-shape: "M 0 0 L 13 7 L 0 13 z";
    -fx-scale-shape: true;
}
.pagination > .pagination-control > .control-box > .bullet-button {   
   -fx-background-radius: 0, 4em, 4em, 4em, 4em;
   -fx-padding: 0.333em;
   -fx-background-color: transparent;
   -fx-background-insets: 0, 5,  6,  7;
}
.pagination > .pagination-control > .control-box > .bullet-button:selected {   
    -fx-base: -fx-accent;
    -fx-background-color: #3F51B5;
}
.pagination.bullet > .pagination-control > .control-box {
    -fx-spacing: 0;
    -fx-alignment: center;
}
.pagination.bullet > .pagination-control > .control-box > .left-arrow-button {
    -fx-background-radius: 4em;
    -fx-background-insets: 0, 1, 2;
    -fx-padding: 0em 0.25em 0em 0.083em; /* 0 3 0 1 */
} 
.pagination.bullet > .pagination-control > .control-box > .right-arrow-button {
    -fx-background-radius: 4em;
    -fx-background-insets: 0, 1, 2;
    -fx-padding: 0em 0.083em 0em 0.25em; /* 0 1 0 3 */
}
.pagination > .pagination-control > .control-box > .number-button {
    -fx-background-radius: 0;
    -fx-padding: 0.166667em 0.333em 0.25em 0.333em;
    -fx-background-color: transparent;
}
.pagination > .pagination-control > .control-box > .number-button:selected {   
    -fx-background-color: #3F51B5;
}
.pagination > .pagination-control > .page-information {   
    -fx-padding: 0.416em 0 0 0;
}


/*******************************************************************************
 *                                                                             *
 * Scroll Bar			                                                       *
 *                                                                             *
 ******************************************************************************/

.scroll-bar:vertical > .track-background, .scroll-bar:horizontal > .track-background {
    -fx-background-color: #F1F1F1;
    -fx-background-insets: 0.0;
}

.scroll-bar:vertical > .thumb, .scroll-bar:horizontal > .thumb {
    -fx-background-color: #BCBCBC;
    -fx-background-insets: 0.0;
    -fx-background-radius: 1.0;
}

.scroll-bar > .increment-button, .scroll-bar > .decrement-button {
    -fx-padding: 5 2 5 2;
}

.scroll-bar > .increment-button, .scroll-bar > .decrement-button, .scroll-bar:hover > .increment-button, .scroll-bar:hover > .decrement-button {
    -fx-background-color: transparent;
}

.scroll-bar > .increment-button > .increment-arrow, .scroll-bar > .decrement-button > .decrement-arrow {
    -fx-background-color: rgb(150.0, 150.0, 150.0);
}

.scroll-bar > .increment-button > .increment-arrow {
    -fx-shape: "M298 426h428l-214 214z";
}

.scroll-bar > .decrement-button > .decrement-arrow {
    -fx-shape: "M298 598l214-214 214 214h-428z";
}

/*******************************************************************************
 *                                                                             *
 * LineChart                                                                     *
 *                                                                             *
 ******************************************************************************/

.chart-line-symbol {
    -fx-background-color: #009688, white;
    -fx-background-insets: 0, 2;
    -fx-background-radius: 5px;
    -fx-padding: 5px;
}
.chart-series-line {
    -fx-stroke: #009688;
    -fx-stroke-width: 3px;
}
.default-color0.chart-line-symbol { -fx-background-color: #009688, white; }
.default-color1.chart-line-symbol { -fx-background-color: #009688, white; }
.default-color2.chart-line-symbol { -fx-background-color: #009688, white; }
.default-color3.chart-line-symbol { -fx-background-color: #009688, white; }
.default-color4.chart-line-symbol { -fx-background-color: #009688, white; }
.default-color5.chart-line-symbol { -fx-background-color: #009688, white; }
.default-color6.chart-line-symbol { -fx-background-color: #009688, white; }
.default-color7.chart-line-symbol { -fx-background-color: #009688, white; }
.default-color0.chart-series-line { -fx-stroke: #009688; }
.default-color1.chart-series-line { -fx-stroke: #009688; }
.default-color2.chart-series-line { -fx-stroke: #009688; }
.default-color3.chart-series-line { -fx-stroke: #009688; }
.default-color4.chart-series-line { -fx-stroke: #009688; }
.default-color5.chart-series-line { -fx-stroke: #009688; }
.default-color6.chart-series-line { -fx-stroke: #009688; }
.default-color7.chart-series-line { -fx-stroke: #009688; }
